<div class="col-md-12 col-sm-12 col-xs-12">
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">用户管理</li>
    </ol>
    <div class="x_panel">
        <div class="x_content">
            <div class="<#--table-responsive-->">
                <div class="btn-group hidden-xs" id="toolbar">
                    <button id="btn_add" type="button" class="btn btn-default" title="新增用户">
                        <i class="fa fa-plus"></i> 新增用户
                    </button>
                    <button id="btn_delete_ids" type="button" class="btn btn-default" title="删除选中">
                        <i class="fa fa-trash-o"></i> 批量删除
                    </button>
                </div>
                <table id="sysUserTable">
                </table>
            </div>
        </div>
    </div>
</div>


<script>
    $(function () {
        $('#sysUserTable').bootstrapTable({
            method: 'POST',
            url: '/user/list',
            striped: true, //是否显示行间隔色
            pageNumber: 1, //初始化加载第一页
            pagination: true,//是否分页
            sidePagination: 'server',//server:服务器端分页|client：前端分页
            pageSize: 5,//单页记录数
            pageList: [5, 10, 20, 30],//可选择单页记录数
            // showRefresh: true,//刷新按钮
            queryParams: function (params) {
                console.log(params);
                var temp = {
                    pageSize: params.pageSize, // 每页显示数量
                    startIndex: params.startIndex, // SQL语句起始索引
                    currentPage: (params.startIndex / params.pageSize) + 1,   //当前页码
                    Name: $('#search_name').val(),
                    Tel: $('#search_tel').val()
                };
                return temp;
            },
            //获取服务端返回的json数据
            responseHandler: function (res) {
                console.log(res)
                if (res.errorMsg != null) {
                    toastr.error(res.errorMsg);
                }
                return {
                    "total": res.total,//总页数
                    "rows": res.rows   //数据
                };

            },
            columns: [{
                field: 'id',
                title: 'id',
            }, {
                field: 'loginName',
                title: '登录名'
            }, {
                field: 'name',
                title: '用户姓名'
            }, {
                field: 'idNo',
                title: '身份证'
            }, {
                field: 'phone',
                title: '电话'
            }, {
                field: 'userType',
                title: '用户类型',
                formatter: function (value, row, index) {
                    if (value == "0") {
                        return "系统管理员"
                    } else if (value == "1") {
                        return "机构管理员";
                    } else {
                        return "普通用户";
                    }
                }
            }, {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter //自定义方法，添加操作按钮
            }]
        });

        //  隐藏列
        $('#sysUserTable').bootstrapTable('hideColumn', 'id');
    })

    /**
     * 操作按钮
     * @param code
     * @param row
     * @param index
     * @returns {string}
     */
    function operateFormatter(code, row, index) {
        var trUserId = row.id;
        var trName = row.name
        return '<a class="btn btn-xs btn-primary btn-update" onclick="editUser(\'' + trUserId + '\',\'' + trName + '\')" data-id="' + trUserId + '"><i class="fa fa-edit"></i>编辑</a>' +
                '<a class="btn btn-xs btn-danger btn-remove" onclick="removeUser(\'' + trUserId + '\',\'' + trName + '\')" data-id="' + trUserId + '"><i class="fa fa-trash-o"></i>删除</a>'
    }

    function editUser(trUserId) {

    }

    function removeUser(trUserId, trName) {
        $.tool.confirm("确定停用该" + trName + "信息？", function () {
            $.ajax({
                type: "post",
                url: "/user/remove",
                traditional: true,
                data: {'id': trUserId},
                success: function (json) {
                    $.tool.ajaxSuccess(json);
                    $.tableUtil.refresh();
                },
                error: $.tool.ajaxError
            });
        }, function () {

        }, 5000);
    }

</script>